<template >
	<view v-if="dataSource.id!=='-1'" class="tree">
		<view class="user-super-container">
			<!-- 画当前节点 -->
			<view class="user-wife-container">
				<!-- 有妻子 有儿子的情况下 给当前节点添加22.5rpx的右侧内边距-->
				<view class="user-container" :style="{'padding-right':dataSource.spouse_val && dataSource.children?'5rpx':'0rpx'}">
					<!-- 每个子节点头部画一个垂直的线  根节点除外 -->
					<view v-show="!isRoot" class="vertical-line" />
					<!-- 用户信息 -->
					<view v-if="dataSource.surname" class="user-info" 
					:style="dataSource.gender==1?'background-color: #7CD4F8;':'background-color: #FFAFAB;'"
					 @click="itemClick" :data-item="dataSource">
						<image v-if="dataSource.PQD&&dataSource.is_living==1" class="card-yaoqing-tag" src="../../static/img-tree-card-yaoqing.png" mode="scaleToFill">
						<view class="head-image-view">
							<image :class="[dataSource.is_living==1 ? 'user-avatar' : 'user-avatar-dad']"
							 v-if="dataSource.head" :src="dataSource.head" mode="scaleToFill" />
						</view>
						<view :class="[dataSource.gxname=='本人' ? 'user-self' : 'user-name']">
							<view :class="getStr(dataSource.surname,dataSource.name).length>3?'user-name-text-small':'user-name-text'">
							{{getStr(dataSource.surname,dataSource.name)}}</view>
						</view>
					</view>
					<!-- 如果当前节点有儿子 有妻子 在节点下方画一条垂直的线 -->
					<view v-if="(dataSource.children.length>0 || dataSource.spouse_val.id)" class="vertical-line"/>
				</view>
				<!-- 处理配偶 -->
				<!-- 如果有配偶 没儿子  则画一根水平线关联夫妻关系 -->
				<view v-show="!dataSource.children" 
				class="horizontal-line" style="width:35rpx;margin-left:5rpx;margin-right:5rpx;" />
				<!-- 有妻子 没有儿子的情况下 给当前配偶节点添加22.5rpx的左侧内边距-->
				<view v-if="dataSource.spouse_val" class="user-container" 
				:style="{'padding-left':dataSource.spouse_val && dataSource.children?'2rpx':'0'}">
					<!-- 每个子节点头部画一个垂直的线 由于是配偶  要透明处理 -->
					<view v-if="!isRoot" class="vertical-line" style="background-color:rgba(0,0,0,0)" />
					<!-- 用户信息 -->
					<view v-if="dataSource.spouse_val.surname" class="user-info" 
					:style="dataSource.spouse_val.gender==1?'background-color: #7CD4F8;':'background-color: #FFAFAB;'"
					 @click="itemClick" :data-item="dataSource.spouse_val">
						<image v-if="dataSource.spouse_val.PQD&&dataSource.spouse_val.is_living==1" 
						class="card-yaoqing-tag" src="../../static/img-tree-card-yaoqing.png" mode="scaleToFill"/>
						<view class="head-image-view">
							<image :class="[dataSource.spouse_val.is_living==1 ? 'user-avatar' : 'user-avatar-dad']"
							 v-if="dataSource.spouse_val.head" :src="dataSource.spouse_val.head" mode="scaleToFill" />
						</view>
						<view v-if="dataSource.spouse_val" :class="[dataSource.spouse_val.gxname=='本人' ? 'user-self' : 'user-name']">
							<view :class="getStr(dataSource.spouse_val.surname,dataSource.spouse_val.name).length>3?
							'user-name-text-small':'user-name-text'">{{getStr(dataSource.spouse_val.surname,dataSource.spouse_val.name)}}</view>
						</view>
					</view>
					<!-- 如果当前节点有儿子 在配偶下方画一条垂直的线 -->
					<view v-show="dataSource.children&&dataSource.spouse_val.surname" class="vertical-line" />
				</view>
			</view>
			<!-- 如果当前节点有儿子并且有配偶 在夫妻下方画一条水平的线 并设置左下 右下圆角 -->
			<view v-if="dataSource.spouse_val.surname" 
			class="horizontal-line left-bottom-radius right-bottom-radius" />
			<view v-if="dataSource.children && !dataSource.spouse_val.surname&&dataSource.children.length>1" 
			class="horizontal-line-two-one"/>
		</view>
		<!-- 有多个儿子 先要画一条垂直的线 再画一条水平的线 -->
		<view v-if="dataSource.children.length > 1" class="vertical-line" />
		<!-- 渲染子节点 如果他的下级最后一个子节点有配偶 则下级的整个布局向右移动144rpx -->
		<view class="children-container" v-if="dataSource.children"  
		:style="{'margin-left':dataSource.children[dataSource.children.length-1].spouse_val?'0rpx':'0rpx'}">
			<block v-for="(item , index) in dataSource.children" :key="index">
				<view class="children-super">
					<block v-if="dataSource.children.length > 1">
						<!-- 第一个的情况 -->
						<view v-if="index==0" :class="[item.spouse_val?'horizontal-line left-top-radius first-wife-line'
						:'horizontal-line left-top-radius first-line']" />
						<!-- 最后一个 -->
						<view v-else-if="index==dataSource.children.length-1"
						 :class="[item.spouse_val?'horizontal-line right-top-radius last-wife-line'
						 :'horizontal-line right-top-radius last-line']" />
						<!-- 中间的 -->
						<view v-else class="horizontal-line" style="width:100%" />
					</block>
					<tree-view :dataSource="item" />
					<!-- <view v-else-if="index==0" class="look-more">打开拾亲APP查看更多成员</view> -->
				</view>
			</block>
		</view>
	</view>
	<view v-else class="add-person-layout">
		<view class="add-person-view"   @click="itemClick" :data-item="dataSource">
			<view class="add-person-icon-view">
				<image class="add-person-vline"  />
				<image class="add-person-hline" />
			</view>
			<view class="add-person-txt">点击添加</view>
		</view>
	</view>
	
</template>
<script>
	var WxNotificationCenter = require('./WxNotificationCenter.js');
	export default {
		name: "tree-view",
		data() {
			return {
				
			}
		},
		props: { //此处定义传入的参数
			dataSource: {
				type: Object
			},
			isRoot: {
				type: Boolean
			},
			maxShi: {
				type: Number
			},
		},
		methods: {
			getStr:function(s1,s2){
				var str=s1+s2
				if(str.length>4){
					return str.substr(0, 4)
				}else{
					return str
				}
			},
			///点击用户
			itemClick(e) {
				let item = e.currentTarget.dataset.item;
				///回调事件
				WxNotificationCenter.postNotificationName('NOTI_TREECLICK', item);
			}
		}
	}
</script>
<style>
	@import "tree-view.css";
</style>
